{% extends 'base.html' %}

{% block extra_css %}
<style>
    /* 仅此页将全局 Toast 容器置于顶部居中 */
    #toastContainer.center-top {
        top: 20px !important;
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%);
    }
    /* Toast 宽度适当放大便于阅读批量错误 */
    #toastContainer .toast { min-width: 420px; }
    @media (max-width: 576px) {
        #toastContainer .toast { min-width: 300px; }
    }
</style>
{% endblock %}

{% block title %}{{ title }} - 固定资产管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <h2>{{ title }}</h2>
        
        <div class="card mb-4">
            <div class="card-header">
                <h5>导入说明</h5>
            </div>
            <div class="card-body">
                {% if import_type == 'organizations' %}
                    <p>请上传包含组织信息的Excel文件，格式要求如下：</p>
                    <ul>
                        <li>第一行为标题行，包含：组织名称、组织代码、描述</li>
                        <li>从第二行开始为数据行</li>
                        <li>组织名称为必填项</li>
                        <li>组织代码如为空则默认与组织名称相同</li>
                    </ul>
                {% elif import_type == 'departments' %}
                    <p>请上传包含部门信息的Excel文件，格式要求如下：</p>
                    <ul>
                        <li>第一行为标题行，包含：部门名称、部门代码、所属组织、描述</li>
                        <li>从第二行开始为数据行</li>
                        <li>部门名称为必填项</li>
                        <li>部门代码如为空则默认与部门名称相同</li>
                        <li>所属组织需为系统中已存在的组织名称</li>
                    </ul>
                {% elif import_type == 'assets' %}
                    <p>请上传包含资产信息的Excel文件，格式要求如下：</p>
                    <ul>
                        <li>第一行为标题行，建议包含以下列（带 * 为必填）：
                            <br>资产名称*、资产编号*、资产类别*、所属组织*、所属部门、使用人、位置、供应商、采购日期*、采购价格*、保修期(月)、折旧率(%)、状态、描述
                        </li>
                        <li>从第二行开始为数据行</li>
                        <li>资产名称、资产编号、资产类别、所属组织、采购日期、采购价格为必填项</li>
                        <li>资产类别需为系统中已存在的类别名称</li>
                        <li>所属组织需为系统中已存在的组织名称（将自动归属到该组织的默认账簿）</li>
                        <li>采购日期格式为：YYYY-MM-DD</li>
                        <li>采购价格为数字</li>
                    </ul>
                {% elif import_type == 'categories' %}
                    <p>请上传包含资产类别信息的Excel文件，格式要求如下：</p>
                    <ul>
                        <li>第一行为标题行，包含：类别名称、类别描述</li>
                        <li>从第二行开始为数据行</li>
                        <li>类别名称为必填项，不能重复</li>
                        <li>类别描述可以为空</li>
                    </ul>
                {% elif import_type == 'consumables' %}
                    <p>请上传包含耗材信息的Excel文件，格式要求如下：</p>
                    <ul>
                        <li>第一行为标题行，包含：耗材名称、类别、单位、当前库存、最低库存、单价、仓库名称、描述</li>
                        <li>从第二行开始为数据行</li>
                        <li>耗材名称为必填项，不能重复</li>
                        <li>库存数量和单价为数字类型</li>
                        <li>仓库名称必须是系统中已存在的仓库</li>
                    </ul>
                {% elif import_type == 'users' %}
                    <p>请上传包含用户信息的Excel文件，格式要求如下：</p>
                    <ul>
                        <li>第一行为标题行，包含：用户名、密码、名、姓、邮箱、是否激活、是否员工、用户组</li>
                        <li>从第二行开始为数据行</li>
                        <li>用户名为必填项，不能重复</li>
                        <li>密码为空时使用默认密码 "password123"</li>
                        <li>邮箱不能重复（如果填写）</li>
                        <li>是否激活/是否员工：填写"是"、"true"、"1"或"yes"表示是</li>
                        <li>用户组：多个用户组用逗号分隔，必须是系统中已存在的用户组</li>
                    </ul>
                    
                    {% if groups %}
                    <div class="alert alert-info mt-3">
                        <h6><i class="fas fa-users me-2"></i>现有用户组</h6>
                        <div class="d-flex flex-wrap gap-1">
                            {% for group in groups %}
                                <span class="badge bg-primary">{{ group.name }}</span>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                {% endif %}
                <p>支持的文件格式：.xlsx、.xls</p>
                
                <!-- 模板下载链接 -->
                <div class="alert alert-info mt-3">
                    <h6><i class="fas fa-download me-2"></i>下载导入模板</h6>
                    <p class="mb-2">为了确保数据格式正确，请下载对应的Excel模板文件：</p>
                    <a href="{% url 'assets:download_import_template' import_type %}" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-file-excel me-2"></i>下载{{ title }}模板
                    </a>
                </div>
            </div>
        </div>
        
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            
            <div class="mb-3">
                <label for="excel_file" class="form-label">选择Excel文件 *</label>
                <input type="file" class="form-control" id="excel_file" name="excel_file" accept=".xlsx,.xls" required>
            </div>
            
            <div class="mb-3">
                <button type="submit" class="btn btn-primary">上传并导入</button>
                <a href="{% if import_type == 'organizations' %}{% url 'assets:organization_list' %}
                        {% elif import_type == 'departments' %}{% url 'assets:department_list' %}
                        {% elif import_type == 'assets' %}{% url 'assets:asset_list' %}
                        {% elif import_type == 'categories' %}{% url 'assets:category_list' %}
                        {% elif import_type == 'consumables' %}{% url 'assets:consumable_list' %}
                        {% elif import_type == 'users' %}{% url 'assets:user_list' %}
                        {% endif %}" class="btn btn-secondary">取消</a>
            </div>
        </form>
    </div>
</div>

<!-- 成功导入弹窗（仅本页使用） -->
<div class="modal fade" id="importSuccessModal" tabindex="-1" aria-labelledby="importSuccessModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-success text-white">
        <h5 class="modal-title" id="importSuccessModalLabel"><i class="fas fa-check-circle me-2"></i>导入成功</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="importSuccessText">导入完成！</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" data-bs-dismiss="modal">知道了</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  // 将全局Toast容器移动到顶部居中（仅此页）
  window.addEventListener('load', function () {
    const tc = document.getElementById('toastContainer');
    if (tc) tc.classList.add('center-top');

    // 如果存在成功类消息，除Toast外再给出模态弹窗提示
    const successMsgs = Array.from(document.querySelectorAll('#djangoMessages .msg[data-level="success"]'));
    if (successMsgs.length > 0) {
      const text = successMsgs.map(n => n.textContent).join('\n');
      const body = document.getElementById('importSuccessText');
      if (body) body.textContent = text || '导入完成！';
      const modalEl = document.getElementById('importSuccessModal');
      if (modalEl) {
        const m = new bootstrap.Modal(modalEl, { backdrop: 'static' });
        m.show();
      }
    }
  });
</script>
{% endblock %}